<template>
  <ul class="product-list">
    <li
      class="item"
      v-for="item in lists"
      :key="item.productId"
      @click="toDetail(item.productId)"
    >
      <div>
        <img :src="item.imgUrl" alt="" class="img" />
        <div class="text">
          <p class="overh f14">{{ item.masterName }}</p>
          <p class="overh f12">{{ item.slaveName }}</p>
          <div class="flex jc-sb aic">
            <p class="red">
              <span class="f10">￥</span>
              <span class="f15">{{ (item.minPrice / 100).toFixed(2) }}</span>
            </p>
            <p class="f999">
              <span class="f10">销量: </span>
              <!-- 库存？ -->
              <span class="f14 pr-5">{{ item.inventory }}</span>
            </p>
          </div>
        </div>
      </div>
    </li>

    <li class="item after"></li>
    <li class="item after"></li>
    <li class="item after"></li>
    <li class="item after"></li>
  </ul>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["lists"],
  methods: {
    toDetail(productId) {
      // 动态路由传参
      let url = "/home/goodDetail/" + productId;
      this.$router.push(url);
    },
  },
};
</script>

<style scoped>
.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  padding: 15px 0 0 0;
}
.product-list .item {
  width: 165px;
  margin-bottom: 20px;
}
.product-list .item .img {
  background-color: #f4f4f4;
  width: 100%;
}
.product-list .item .text {
  margin-top: 10px;
  line-height: 1.5;
}
.product-list .after {
  height: 0;
  margin: 0;
}
</style>